
export function upDownOpen(width,height,actionSpeed,callback) {
  let top = document.createElement("div");
  top.setAttribute('id','top');
  top.style.width = width + 'px';
  top.style.position = 'absolute';
  top.style.height = height / 2 + 'px';
  top.style.top = '0';
  top.style.left = '0';
  top.style.background = '#000';
  let bottom = document.createElement("div");
  bottom.setAttribute('id','bottom');
  bottom.style.width = width + 'px';
  bottom.style.position = 'absolute';
  bottom.style.height = height / 2 + 'px';
  bottom.style.bottom = '0';
  bottom.style.left = '0';
  bottom.style.background = '#000';
  top.addEventListener('animationend',()=>{
    top.style.animation = '';
    top.remove();
  })
  top.style.animationTimingFunction = 'linear';
  top.style.animationDuration = actionSpeed + 's';
  top.style.animationIterationCount = 1;
  bottom.addEventListener('animationend',()=>{
    bottom.style.animation = '';
    bottom.remove();
  })
  bottom.style.animationTimingFunction = 'linear';
  bottom.style.animationDuration = actionSpeed + 's';
  bottom.style.animationIterationCount = 1;
  top.setAttribute('class','hideHeight');
  bottom.setAttribute('class','hideHeight');
  callback(top,bottom);
}

export function leftRightClose(width,height,actionSpeed,callback) {
  let left = document.createElement("div");
  left.setAttribute('id','left');
  left.style.width = width / 2 + 'px';
  left.style.position = 'absolute';
  left.style.height = height + 'px';
  left.style.top = '0';
  left.style.right = width / 2 + 'px';
  left.style.background = '#000';
  let right = document.createElement("div");
  right.setAttribute('id','right');
  right.style.width = width / 2 + 'px';
  right.style.position = 'absolute';
  right.style.height = height + 'px';
  right.style.top = '0';
  right.style.left = width / 2 + 'px';
  right.style.background = '#000';
  left.addEventListener('animationend',()=>{
    left.style.animation = '';
    left.remove();
  })
  left.style.animationTimingFunction = 'linear';
  left.style.animationDuration = actionSpeed + 's';
  left.style.animationIterationCount = 1;
  right.addEventListener('animationend',()=>{
    right.style.animation = '';
    right.remove();
  })
  right.style.animationTimingFunction = 'linear';
  right.style.animationDuration = actionSpeed + 's';
  right.style.animationIterationCount = 1;
  left.setAttribute('class','hideWidth');
  right.setAttribute('class','hideWidth');
  callback(left,right);
}

export function upDownClose(width,height,actionSpeed,callback) {
  let top = document.createElement("div");
  top.setAttribute('id','top');
  top.style.width = width + 'px';
  top.style.position = 'absolute';
  top.style.height = height / 2 + 'px';
  top.style.bottom = height / 2 + 'px';
  top.style.left = '0';
  top.style.background = '#000';
  let bottom = document.createElement("div");
  bottom.setAttribute('id','bottom');
  bottom.style.width = width + 'px';
  bottom.style.position = 'absolute';
  bottom.style.height = height / 2 + 'px';
  bottom.style.top = height / 2 + 'px';
  bottom.style.left = '0';
  bottom.style.background = '#000';
  top.addEventListener('animationend',()=>{
    top.style.animation = '';
    top.remove();
  })
  top.style.animationTimingFunction = 'linear';
  top.style.animationDuration = actionSpeed + 's';
  top.style.animationIterationCount = 1;
  bottom.addEventListener('animationend',()=>{
    bottom.style.animation = '';
    bottom.remove();
  })
  bottom.style.animationTimingFunction = 'linear';
  bottom.style.animationDuration = actionSpeed + 's';
  bottom.style.animationIterationCount = 1;
  top.setAttribute('class','hideHeight');
  bottom.setAttribute('class','hideHeight');
  callback(top,bottom);
}
export function centerOutRect(width,height,actionSpeed,callback) {
  let topLeft = document.createElement("div");
  let topRight = document.createElement("div");
  let bottomLeft = document.createElement("div");
  let bottomRight = document.createElement("div");
  topLeft.style.position = 'absolute';
  topLeft.style.width = width / 2 + 'px';
  topLeft.style.height = height / 2 + 'px';
  topLeft.style.top =  '0';
  topLeft.style.left = '0';
  topLeft.style.background = '#000';
  topLeft.addEventListener('animationend',()=>{
    topLeft.style.animation = '';
    topLeft.remove();
  })
  topLeft.style.animationTimingFunction = 'linear';
  topLeft.style.animationDuration = actionSpeed + 's';
  topLeft.style.animationIterationCount = 1;
  topRight.style.position = 'absolute';
  topRight.style.width = width / 2 + 'px';
  topRight.style.height = height / 2 + 'px';
  topRight.style.top =  '0';
  topRight.style.right = '0';
  topRight.style.background = '#000';
  topRight.addEventListener('animationend',()=>{
    topRight.style.animation = '';
    topRight.remove();
  })
  topRight.style.animationTimingFunction = 'linear';
  topRight.style.animationDuration = actionSpeed + 's';
  topRight.style.animationIterationCount = 1;
  bottomLeft.style.position = 'absolute';
  bottomLeft.style.width = width / 2 + 'px';
  bottomLeft.style.height = height / 2 + 'px';
  bottomLeft.style.bottom =  '0';
  bottomLeft.style.left = '0';
  bottomLeft.style.background = '#000';
  bottomLeft.addEventListener('animationend',()=>{
    bottomLeft.style.animation = '';
    bottomLeft.remove();
  })
  bottomLeft.style.animationTimingFunction = 'linear';
  bottomLeft.style.animationDuration = actionSpeed + 's';
  bottomLeft.style.animationIterationCount = 1;
  bottomRight.style.position = 'absolute';
  bottomRight.style.width = width / 2 + 'px';
  bottomRight.style.height = height / 2 + 'px';
  bottomRight.style.bottom =  '0';
  bottomRight.style.right = '0';
  bottomRight.style.background = '#000';
  bottomRight.addEventListener('animationend',()=>{
    bottomRight.style.animation = '';
    bottomRight.remove();
  })
  bottomRight.style.animationTimingFunction = 'linear';
  bottomRight.style.animationDuration = actionSpeed + 's';
  bottomRight.style.animationIterationCount = 1;
  topLeft.setAttribute('class','hideWidthHeightRect');
  topRight.setAttribute('class','hideWidthHeightRect');
  bottomLeft.setAttribute('class','hideWidthHeightRect');
  bottomRight.setAttribute('class','hideWidthHeightRect');
  callback(topLeft,topRight,bottomLeft,bottomRight);
}
export function outCenterRect(width,height,actionSpeed,callback) {
  let topLeft = document.createElement("div");
  let topRight = document.createElement("div");
  let bottomLeft = document.createElement("div");
  let bottomRight = document.createElement("div");
  topLeft.style.position = 'absolute';
  topLeft.style.width = width / 2 + 'px';
  topLeft.style.height = height / 2 + 'px';
  topLeft.style.bottom = height / 2 + 'px';
  topLeft.style.right = width / 2 + 'px';
  topLeft.style.background = '#000';
  topLeft.addEventListener('animationend',()=>{
    topLeft.style.animation = '';
    topLeft.remove();
  })
  topLeft.style.animationTimingFunction = 'linear';
  topLeft.style.animationDuration = actionSpeed + 's';
  topLeft.style.animationIterationCount = 1;
  topRight.style.position = 'absolute';
  topRight.style.width = width / 2 + 'px';
  topRight.style.height = height / 2 + 'px';
  topRight.style.bottom = height / 2 + 'px';
  topRight.style.left = width / 2 + 'px';
  topRight.style.background = '#000';
  topRight.addEventListener('animationend',()=>{
    topRight.style.animation = '';
    topRight.remove();
  })
  topRight.style.animationTimingFunction = 'linear';
  topRight.style.animationDuration = actionSpeed + 's';
  topRight.style.animationIterationCount = 1;
  bottomLeft.style.position = 'absolute';
  bottomLeft.style.width = width / 2 + 'px';
  bottomLeft.style.height = height / 2 + 'px';
  bottomLeft.style.top = height / 2 + 'px';
  bottomLeft.style.right = width / 2 + 'px';
  bottomLeft.style.background = '#000';
  bottomLeft.addEventListener('animationend',()=>{
    bottomLeft.style.animation = '';
    bottomLeft.remove();
  })
  bottomLeft.style.animationTimingFunction = 'linear';
  bottomLeft.style.animationDuration = actionSpeed + 's';
  bottomLeft.style.animationIterationCount = 1;
  bottomRight.style.position = 'absolute';
  bottomRight.style.width = width / 2 + 'px';
  bottomRight.style.height = height / 2 + 'px';
  bottomRight.style.top = height / 2 + 'px';
  bottomRight.style.left = width / 2 + 'px';
  bottomRight.style.background = '#000';
  bottomRight.addEventListener('animationend',()=>{
    bottomRight.style.animation = '';
    bottomRight.remove();
  })
  bottomRight.style.animationTimingFunction = 'linear';
  bottomRight.style.animationDuration = actionSpeed + 's';
  bottomRight.style.animationIterationCount = 1;
  topLeft.setAttribute('class','hideWidthHeightRect');
  topRight.setAttribute('class','hideWidthHeightRect');
  bottomLeft.setAttribute('class','hideWidthHeightRect');
  bottomRight.setAttribute('class','hideWidthHeightRect');
  callback(topLeft,topRight,bottomLeft,bottomRight);
}
export function centerOut(width,height,actionSpeed,callback) {
  let topLeft = document.createElement("div");
  let topRight = document.createElement("div");
  let bottomLeft = document.createElement("div");
  let bottomRight = document.createElement("div");
  topLeft.style.position = 'absolute';
  topLeft.style.width = width / 2 + 'px';
  topLeft.style.height = height / 2 + 'px';
  topLeft.style.top =  '0';
  topLeft.style.left = '0';
  topLeft.style.background = '#000';
  topLeft.addEventListener('animationend',()=>{
    topLeft.style.animation = '';
    topLeft.remove();
  })
  topLeft.style.animationTimingFunction = 'linear';
  topLeft.style.animationDuration = actionSpeed + 's';
  topLeft.style.animationIterationCount = 1;
  topRight.style.position = 'absolute';
  topRight.style.width = width / 2 + 'px';
  topRight.style.height = height / 2 + 'px';
  topRight.style.top =  '0';
  topRight.style.right = '0';
  topRight.style.background = '#000';
  topRight.addEventListener('animationend',()=>{
    topRight.style.animation = '';
    topRight.remove();
  })
  topRight.style.animationTimingFunction = 'linear';
  topRight.style.animationDuration = actionSpeed + 's';
  topRight.style.animationIterationCount = 1;
  bottomLeft.style.position = 'absolute';
  bottomLeft.style.width = width / 2 + 'px';
  bottomLeft.style.height = height / 2 + 'px';
  bottomLeft.style.bottom =  '0';
  bottomLeft.style.left = '0';
  bottomLeft.style.background = '#000';
  bottomLeft.addEventListener('animationend',()=>{
    bottomLeft.style.animation = '';
    bottomLeft.remove();
  })
  bottomLeft.style.animationTimingFunction = 'linear';
  bottomLeft.style.animationDuration = actionSpeed + 's';
  bottomLeft.style.animationIterationCount = 1;
  bottomRight.style.position = 'absolute';
  bottomRight.style.width = width / 2 + 'px';
  bottomRight.style.height = height / 2 + 'px';
  bottomRight.style.bottom =  '0';
  bottomRight.style.right = '0';
  bottomRight.style.background = '#000';
  bottomRight.addEventListener('animationend',()=>{
    bottomRight.style.animation = '';
    bottomRight.remove();
  })
  bottomRight.style.animationTimingFunction = 'linear';
  bottomRight.style.animationDuration = actionSpeed + 's';
  bottomRight.style.animationIterationCount = 1;
  topLeft.setAttribute('class','hideWidthHeight');
  topRight.setAttribute('class','hideWidthHeight');
  bottomLeft.setAttribute('class','hideWidthHeight');
  bottomRight.setAttribute('class','hideWidthHeight');
  callback(topLeft,topRight,bottomLeft,bottomRight);
}
export function outCenter(width,height,actionSpeed,callback) {
  let topLeft = document.createElement("div");
  let topRight = document.createElement("div");
  let bottomLeft = document.createElement("div");
  let bottomRight = document.createElement("div");
  topLeft.style.position = 'absolute';
  topLeft.style.width = width / 2 + 'px';
  topLeft.style.height = height / 2 + 'px';
  topLeft.style.bottom = height / 2 + 'px';
  topLeft.style.right = width / 2 + 'px';
  topLeft.style.background = '#000';
  topLeft.addEventListener('animationend',()=>{
    topLeft.style.animation = '';
    topLeft.remove();
  })
  topLeft.style.animationTimingFunction = 'linear';
  topLeft.style.animationDuration = actionSpeed + 's';
  topLeft.style.animationIterationCount = 1;
  topRight.style.position = 'absolute';
  topRight.style.width = width / 2 + 'px';
  topRight.style.height = height / 2 + 'px';
  topRight.style.bottom = height / 2 + 'px';
  topRight.style.left = width / 2 + 'px';
  topRight.style.background = '#000';
  topRight.addEventListener('animationend',()=>{
    topRight.style.animation = '';
    topRight.remove();
  })
  topRight.style.animationTimingFunction = 'linear';
  topRight.style.animationDuration = actionSpeed + 's';
  topRight.style.animationIterationCount = 1;
  bottomLeft.style.position = 'absolute';
  bottomLeft.style.width = width / 2 + 'px';
  bottomLeft.style.height = height / 2 + 'px';
  bottomLeft.style.top = height / 2 + 'px';
  bottomLeft.style.right = width / 2 + 'px';
  bottomLeft.style.background = '#000';
  bottomLeft.addEventListener('animationend',()=>{
    bottomLeft.style.animation = '';
    bottomLeft.remove();
  })
  bottomLeft.style.animationTimingFunction = 'linear';
  bottomLeft.style.animationDuration = actionSpeed + 's';
  bottomLeft.style.animationIterationCount = 1;
  bottomRight.style.position = 'absolute';
  bottomRight.style.width = width / 2 + 'px';
  bottomRight.style.height = height / 2 + 'px';
  bottomRight.style.top = height / 2 + 'px';
  bottomRight.style.left = width / 2 + 'px';
  bottomRight.style.background = '#000';
  bottomRight.addEventListener('animationend',()=>{
    bottomRight.style.animation = '';
    bottomRight.remove();
  })
  bottomRight.style.animationTimingFunction = 'linear';
  bottomRight.style.animationDuration = actionSpeed + 's';
  bottomRight.style.animationIterationCount = 1;
  topLeft.setAttribute('class','hideWidthHeight');
  topRight.setAttribute('class','hideWidthHeight');
  bottomLeft.setAttribute('class','hideWidthHeight');
  bottomRight.setAttribute('class','hideWidthHeight');
  callback(topLeft,topRight,bottomLeft,bottomRight);
}
export function openPic(width,height,actionSpeed,callback) {
  let left = document.createElement("div");
  left.style.position = 'absolute';
  left.style.width = width / 2 + 'px';
  left.style.height = height + 'px';
  left.style.top = '0';
  left.style.left = '0';
  left.style.background = '#000';
  left.style.borderRight = '1px solid #ff0000';
  let right = document.createElement("div");
  right.style.position = 'absolute';
  right.style.width = width / 2 + 'px';
  right.style.height = height + 'px';
  right.style.top = '0';
  right.style.right = '0';
  right.style.background = '#000';
  right.style.borderLeft = '1px solid #ff0000';
  left.addEventListener('animationend',()=>{
    left.style.animation = '';
    left.remove();
  })
  left.style.animationTimingFunction = 'linear';
  left.style.animationDuration = actionSpeed + 's';
  left.style.animationIterationCount = 1;
  right.addEventListener('animationend',()=>{
    right.style.animation = '';
    right.remove();
  })
  right.style.animationTimingFunction = 'linear';
  right.style.animationDuration = actionSpeed + 's';
  right.style.animationIterationCount = 1;
  left.setAttribute('class','hideWidth');
  right.setAttribute('class','hideWidth');
  callback(left,right);
}
export function closePic(width,height,actionSpeed,callback) {
  let left = document.createElement("div");
  left.setAttribute('id','left');
  left.style.width = width / 2 + 'px';
  left.style.position = 'absolute';
  left.style.height = height + 'px';
  left.style.top = '0';
  left.style.right = width / 2 + 'px';
  left.style.background = '#000';
  left.style.borderLeft = '1px solid #ff0000';
  let right = document.createElement("div");
  right.setAttribute('id','right');
  right.style.width = width / 2 + 'px';
  right.style.position = 'absolute';
  right.style.height = height + 'px';
  right.style.top = '0';
  right.style.left = width / 2 + 'px';
  right.style.background = '#000';
  right.style.borderRight = '1px solid #ff0000';
  left.addEventListener('animationend',()=>{
    left.style.animation = '';
    left.remove();
  })
  left.style.animationTimingFunction = 'linear';
  left.style.animationDuration = actionSpeed + 's';
  left.style.animationIterationCount = 1;
  right.addEventListener('animationend',()=>{
    right.style.animation = '';
    right.remove();
  })
  right.style.animationTimingFunction = 'linear';
  right.style.animationDuration = actionSpeed + 's';
  right.style.animationIterationCount = 1;
  left.setAttribute('class','hideWidth');
  right.setAttribute('class','hideWidth');
  callback(left,right);
}
